<template>
  <div>

    <div>
      <!--头部开始-->
      <div style="height: 50px;background-color:#3c7fff;display: flex;align-items: center">
        <div style="width: 200px;display:flex;align-items: center;font-size: 20px;color:white">房东后台管理系统</div>
        <div style="flex: 1"></div>
        <div style="width: fit-content;display: flex;align-items: center ;padding-right: 10px">
          <img :src="data.user.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"  alt="" style="border-radius:50%; width: 40px;height: 40px">
          <span style="color:white;margin-left: 5px;color:white">{{data.user.name}}</span>
        </div>
        
      </div>


    </div>
    <!--头部结束-->

    <!--从下面部分开始-->
    <div style="display: flex">
      <!--左侧导航菜单开始-->
      <div style="width: 200px; border-right: 1px solid #ddd;min-height: calc(100vh - 50px)">
        <el-menu router :default-active="router.currentRoute.value.path" style="border: 0" >

        <el-menu-item index="/owner_manager/home" >
          <template #title>
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </template>
        </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/owner_manager/notice" >
              <div class="menu-item-wrapper">
                <!-- 红点显示在左侧 -->
                <span>我的消息</span>
                <div v-if="unReadCount > 0" class="red-dot">{{ unReadCount }}</div>
              </div>
            </el-menu-item>
            <el-menu-item index="/owner_manager/room_type">房间分类</el-menu-item>
            <el-menu-item index="/owner_manager/room_information">客房信息</el-menu-item>
            <el-menu-item index="/owner_manager/check_in">入住信息</el-menu-item>
            <el-menu-item index="/owner_manager/comments">评论管理</el-menu-item>
            <el-menu-item index="/owner_manager/order">订单管理</el-menu-item>
            <el-menu-item index="/owner_manager/appointment">预约处理</el-menu-item>
          </el-sub-menu>


          <el-menu-item @click="logout">退出登录</el-menu-item>
          <el-menu-item index="/owner_manager/person">个人信息</el-menu-item>

        </el-menu>
      </div>
      <!--左侧导航菜单结束-->

      <!--右侧主体区域开始-->
      <div style="flex: 1;width: 0;background-color: #f5f7ff;padding: 10px">
       <router-view @updateUser="updateUser"/>
      </div>

    </div>

  </div>
</template>

<script setup>
import {HomeFilled} from "@element-plus/icons-vue"
import router from "../router";
import {reactive, onMounted} from "vue";
import request from "../utils/request";
import {ElMessage} from "element-plus";
import { loadUnreadCount, unReadCount } from '../utils/messageUtils';
// import {useWebSocketStore} from "../stores/webSocket.js";
// const websocketStore = useWebSocketStore();

const data = reactive({
  user: JSON.parse(localStorage.getItem('localStorageUser')),
});

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('localStorageUser'))
}

const logout = () => {
  localStorage.removeItem('localStorageUser')
  localStorage.removeItem('token')
  location.href = '/login'
  // websocketStore.closeWebSocket();
}

// 初始化加载未读消息数量
onMounted(async () => {
  if (data.user) {
    await loadUnreadCount(data.user.id, data.user.role);
  }
});

</script>
<style scoped>
/* 菜单项容器（实现红点与文字对齐） */
.menu-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 红点样式 */
.red-dot {
  background: #ff4d4f;  /* 红色背景 */
  color: white;         /* 文字白色 */
  border-radius: 10px;  /* 圆形 */
  min-width: 18px;      /* 最小宽度 */
  height: 18px;
  line-height: 18px;    /* 垂直居中 */
  text-align: center;
  font-size: 12px;
  padding: 0 5px;       /* 水平内边距 */
  margin-left: 8px;     /* 与文字间距 */
  font-weight: bold;
}
</style>